import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Image,
    FlatList,
    StatusBar,
    TextInput,
    ScrollView,
    Picker,
    WebView,
    DeviceEventEmitter
} from 'react-native';
import { base } from "../../../../assets/style";
import LinearGradient from "react-native-linear-gradient";
import ReactNativePickerSelect from 'react-native-picker-select'
import Toast from 'react-native-easy-toast'
import { API } from "../../../../api";
import Loading from '../../../../components/loading/index'
import { getUserInfo } from "../../../../utils/login";
import {DeviceStorage} from "../../../../utils/DeviceStorage";
import QRCode from 'react-native-qrcode';
import { i18n } from "../../../../utils/locales/i18n";


type Props = {};
export default class VerifyGoogle extends Component<Props> {
    static navigationOptions = ({ navigation }) => {
        return {
            title: i18n.t('i35'),
            headerStyle: {
            },
            headerTintColor: '#0f0f0f',
            headerBackTitle: null
        }
    };
    constructor() {
        super();
        this.state = {
            second: 60,
            showLoading: false,
            info: '',
            QRCodeDataUrl: '',

            userInfo: {
                AreCode: "",
                AssPass: false,
                BankInfo: null,
                Email: "",
                GoogleAuth: "",
                GoogleOpen: 0,
                HadAd: 0,
                Kyc: 0,
                Name: "",
                Phone: "",
                TxFail: 0,
                TxSuc: 0,
                Username: ""
            },
            googleCode: ''
        }
    }
    componentDidMount = async () => {
        await this._getUserInfo()
        await this._genVerifyQRCode()
    }
    // 生成成二维码
    _genVerifyQRCode = async () => {
        // 获取GoogleAuth
        const GoogleAuth = this.state.userInfo.GoogleAuth
        const Username = this.state.userInfo.Username
        const QRCodeText = `otpauth://totp/FCCOTC(${Username})?secret=${GoogleAuth.toLowerCase()}`
        // 转换
        this.setState({
            QRCodeDataUrl: QRCodeText
        })
    }
    // 开启验证
    activateGoogleCode = async () => {
        if (this.state.googleCode === '') {
            this.ref.toast.show(i18n.t('i36'))
            return
        }
        this.setState({
            showLoading: true,
            info: i18n.t('loading')
        })

        const res = await API._fetch('bindGoogle', { code: this.state.googleCode })
        if (res.code === 10000) {
            this.refs.toast.show(res.msg || i18n.t('o_success'))
            this.setState({
                showLoading: false
            })
            setTimeout(() => {
                DeviceEventEmitter.emit('refresh_user_info');
                this.props.navigation.goBack()
            }, 0)

        } else {
            this.setState({
                showLoading: false
            })
            this.refs.toast.show(res.msg || i18n.t('o_defeat'))
        }
    }
    _getUserInfo = async () => {
        const userInfoJson = await DeviceStorage.get('user_info')
        this.setState({
            userInfo: JSON.parse(userInfoJson)
        })
    }
    render() {
        return (
            <View style={[base.flex_1]}>
                { this.state.showLoading ? (
                    <Loading
                        info={this.state.info}
                    />
                ) : null}
                <Toast ref={'toast'} position={'bottom'} positionValue={200}/>
                <ScrollView style={[base.flex_1, { width: '100%' }]}>
                    <View style={[{width: '100%', paddingHorizontal: 15, paddingVertical: 20}]}>
                        <View style={[base.flex_col_start, { alignItems: 'flex-start' }]}>
                            <View style={{paddingVertical: 10, borderColor: '#ff7606', borderBottomWidth: 2}}>
                                <Text style={[base.color_gray, { fontSize: 18 }]}>{i18n.t('i37')}</Text>
                            </View>
                            {/*step 1*/}
                            <View style={{ paddingTop: 35 }}>
                                <View style={{paddingBottom: 10}}>
                                    <Text style={{ fontSize: 16 }}>{i18n.t('i38')}</Text>
                                </View>
                                <View style={[base.flex_row_start, {paddingBottom: 10}]}>
                                    <Text style={{lineHeight: 20}}>
                                        <Text style={[base.color_gray, { fontSize: 14 }]}>{i18n.t('i39')}</Text>
                                        <Text style={[base.color_orange, { fontSize: 14 }] }>{i18n.t('i40')}</Text>
                                        <Text style={[base.color_gray, { fontSize: 14 }]}>/</Text>
                                        <Text style={[base.color_orange, { fontSize: 14 }] }>Authy</Text>
                                        <Text style={[base.color_gray, { fontSize: 14 }]}>/</Text>
                                        <Text style={[base.color_orange, { fontSize: 14 }] }>身份宝</Text>
                                        <Text style={[base.color_gray, { fontSize: 14 }]}>{i18n.t('i41')}</Text>
                                    </Text>
                                </View>
                            </View>
                            {/*step 2*/}
                            <View style={{ paddingTop: 35 }}>
                                <View style={{paddingBottom: 10}}>
                                    <Text style={{ fontSize: 16 }}>{i18n.t('i42')}</Text>
                                </View>
                                <View style={[base.flex_row_start, {paddingBottom: 10}]}>
                                    <Text style={[base.color_gray, { fontSize: 14, lineHeight: 20 }]}>
                                        {i18n.t('i43')}
                                    </Text>
                                </View>
                                <View style={[base.flex_col_center, { height: 220, marginBottom: 20 }]}>
                                    { this.state.QRCodeDataUrl ? (
                                        <QRCode
                                            value={this.state.QRCodeDataUrl}
                                            size={200}
                                            bgColor='black'
                                            fgColor='white'/>
                                    ) : (
                                        <View style={[base.flex_col_center, base.flex_1 ]}><Text>Loading....</Text></View>
                                    ) }
                                </View>
                                <View>
                                    <View style={{ paddingVertical: 10 }}>
                                        <Text style={[base.color_gray]}>{ i18n.t('i44') }</Text>
                                    </View>
                                    <View style={[{ width: '100%', height: 40, borderRadius: 5, paddingHorizontal: 20, backgroundColor: '#eee' }, base.flex_col_center]}>
                                        <Text selectable={true}>{this.state.userInfo.GoogleAuth}</Text>
                                    </View>
                                    <View style={{paddingTop: 10}}>
                                        <Text style={{color: '#bd2a37', fontSize: 14, lineHeight: 16}}>
                                            { i18n.t('i45') }
                                        </Text>
                                    </View>
                                </View>
                            </View>
                            {/*step 3*/}
                            <View style={{paddingTop: 35}}>
                                <View style={{paddingBottom: 10}}>
                                    <Text style={{ fontSize: 16 }}>{ i18n.t('i46') }</Text>
                                </View>
                                <View style={{ width: '100%' }}>
                                    <View style={{ paddingVertical: 10 }}>
                                        <Text style={[base.color_gray, { fontSize: 14 }]}>{ i18n.t('i47') }</Text>
                                    </View>
                                    <View style={{ height: 40, backgroundColor: '#eee', width: '100%', borderRadius: 5, marginVertical: 5, flexDirection: 'row' }}>
                                        <TextInput
                                            style={{color: '#808080', width: '100%', height: '100%', flex: 1, paddingLeft: 15}}
                                            onChangeText={(text) => this.setState({googleCode: text})}
                                            placeholder={ i18n.t('i48') }
                                            value={this.state.googleCode}
                                        />
                                    </View>
                                    <View style={{ paddingVertical: 10 }}>
                                        <Text style={{ lineHeight: 18 }}>
                                            <Text style={[base.color_gray, { fontSize: 14 }]}>{ i18n.t('i49') }</Text>
                                            <Text style={[base.color_orange, { fontSize: 14 }]}>https://time.is</Text>
                                            <Text style={[base.color_gray, { fontSize: 14 }]}>{ i18n.t('i50') }</Text>
                                        </Text>
                                    </View>
                                </View>
                            </View>
                            {/*submit */}
                            <View style={[{ width: '100%', height: 200 }, base.flex_col_center]}>
                                <View style={[base.flex_1, base.flex_col_center, { paddingBottom: 30, width: '100%' }]}>
                                    <TouchableOpacity style={{width: '100%'}} onPress={this.activateGoogleCode}>
                                        <LinearGradient
                                            start={{x: 0, y: 0}}
                                            end={{x: 1, y: 1}}
                                            colors={['#feac1c', '#ff7506']}
                                            style={{ width: '100%', height: 46, borderRadius: 23, justifyContent: 'center', alignItems: 'center' }}
                                        >
                                            <Text style={{color: '#fff', fontSize: 16}}>{ i18n.t('i51') }</Text>
                                        </LinearGradient>
                                    </TouchableOpacity>
                                </View>
                            </View>
                        </View>
                    </View>
                </ScrollView>
            </View>
        )
    }
}

const styles = StyleSheet.create({
});
const pickerSelectStyles = StyleSheet.create({
    inputIOS: {
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        height: 45,
        paddingHorizontal: 15,
        borderWidth: 1,
        borderColor: '#d2d2d2',
        borderRadius: 5,
        backgroundColor: 'white',
        color: '#808080',
        marginVertical: 5
    },
    inputAndroid: {
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        height: 45,
        paddingHorizontal: 15,
        borderWidth: 1,
        borderColor: '#d2d2d2',
        borderRadius: 5,
        backgroundColor: 'white',
        color: '#808080',
        marginVertical: 5
    },
});
